<template>
	<view class="fl-s-s p-30 relative pbox" style="padding-top: 0;">
		<!-- <view class="w-1">
			<u-line-progress activeColor="#01796d" height="20rpx" inactiveColor="#f1f1f1" :percentage="step*50" :showText="false"></u-line-progress>
		</view> -->
		<block v-if="step==1">
			<view class="ibox fr-s-c">
				<text class="c-33 fs-30 w-132 bold">+86</text>
				<!-- <image style="width: 48rpx; height: 48rpx;" src="/static/images/login/phone.png" mode=""></image> -->
				<input type="number" maxlength="11" v-model="mobile" class="flex-1 m-l-15 fs-28" placeholder="请输入手机号" />
			</view>
			<view class="ibox fr-s-c">
				<text class="c-33 fs-30 w-132 bold">验证码</text>
				<!-- <image style="width: 48rpx; height: 48rpx;" src="/static/images/login/security.png" mode=""></image> -->
				<input type="number" maxlength="6" v-model="code" class="flex-1 fs-28 m-l-15" placeholder="请输入验证码" />
				<text class="c-main codebtn fr-c fs-20" @click="getCode">{{tips}}</text>
			</view>
			<view class="ibox fr-s-c">
				<text class="c-33 fs-30 w-132 bold">密码</text>
				<!-- <image style="width: 48rpx; height: 48rpx;" src="/static/images/login/pwd.png" mode=""></image> -->
				<input type="text" :password="pwd" v-model="password" class="m-r-20 m-l-15 flex-1 fs-28" placeholder="请输入密码" />
				<up-icon @click="pwd=!pwd" :name="pwd?'eye-off':'eye'" size="40rpx" color="#454545"></up-icon>
			</view>
			<view class="ibox fr-s-c">
				<text class="c-33 fs-30 w-132 bold">确认密码</text>
				<!-- <image style="width: 48rpx; height: 48rpx;" src="/static/images/login/pwd.png" mode=""></image> -->
				<input type="text" :password="pwd" v-model="repwd" class="m-r-20 m-l-15 flex-1 fs-28" placeholder="请再次输入新密码" />
				<up-icon @click="pwd=!pwd" :name="pwd?'eye-off':'eye'" size="40rpx" color="#454545"></up-icon>
			</view>
			<!-- <view class="ibox fr-s-c">
				<text class="c-33 fs-30 w-132 bold">邀请码</text>
				<input type="text" v-model="scene" class="m-r-20 m-l-15 flex-1 fs-28" placeholder="请输入邀请码" />
			</view> -->
			<view class="flex-1"></view>
			<view class="w-1 fr-c">
				<view class="c-99 fr-s-c fs-24 p-30" >
					<view class="fr-s-c" @click="agree=!agree">
						<image v-if="agree" style="width: 32rpx; height: 32rpx;" src="/static/images/login/y.png"></image>
						<image v-if="!agree" style="width: 32rpx; height: 32rpx;" src="/static/images/login/n.png"></image>
						<text class="m-l-10">我已阅读并同意</text>
					</view>
					<navigator class="c-main" url="/pagemaster/pages/RichText/RichText?type=3" hover-class="none">《用户协议》
					</navigator>
					<text class="c-main">和</text>
					<navigator class="c-main" url="/pagemaster/pages/RichText/RichText?type=2" hover-class="none">《隐私政策》
					</navigator>
				</view>
			</view>
		</block>
		
		<block v-if="step==2">
			
			<view class="qybox fr-b-c p-r-30 m-t-40 fr-b-c">
				<text class="c-33 fs-28 bold">企业名称</text>
				<input type="text" class="flex-1 fs-28 t-r m-l-10" v-model="authobj.realname" placeholder="请输入企业名称" />
			</view>
			<text class="c-33 fs-28 bold m-t-40">上传营业执照照片</text>
			<view class="w-1 fl-s-s m-t-20">
				<view class="fl-s-c">
					<up-upload :sizeType="['compressed']" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="false"
						width="330rpx" height="196rpx" :maxCount="1">
						<image style="width: 330rpx; height: 196rpx;" :src="$path + '/login/z1.png'" mode="aspectFill"></image>
					</up-upload>
					<text class="c-33 fs-28 m-t-10">营业执照</text>
				</view>
			</view>
			<text class="c-33 fs-28 bold m-t-40">上传法人身份证照片</text>
			<view class="w-1 fr-b-s m-t-20">
				<view class="fl-s-c">
					<up-upload :sizeType="['compressed']" :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :multiple="false"
						width="330rpx" height="196rpx" :maxCount="1">
						<image style="width: 330rpx; height: 196rpx;" :src="$path + '/login/z2.png'" mode="aspectFill"></image>
					</up-upload>
					<text class="c-33 fs-28 m-t-10">上传身份证人像面</text>
				</view>
				<view class="fl-s-c">
					<up-upload :sizeType="['compressed']" :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" :multiple="false"
						width="330rpx" height="196rpx" :maxCount="1">
						<image style="width: 330rpx; height: 196rpx;" :src="$path + '/login/z3.png'" mode="aspectFill"></image>
					</up-upload>
					<text class="c-33 fs-28 m-t-10">上传身份证国徽面</text>
				</view>
			</view>
			<view class="flex-1"></view>
		</block>
		<view class="big-btn c-ff fr-c fs-30" @click="sub">{{step==1?'下一步':'提交注册'}}</view>
		
		<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
	</view>
</template>

<script setup>
	
	console.log('uni',uni)
	import {baseUrl} from '@/utils/base.js'
	import genTestUserSig from '@/utils/GenerateTestUserSig.js';
	const mobile = ref('');
	const code = ref('');
	const password = ref('');
	const scene = ref('');
	const repwd = ref('')
	const pwd = ref(true);
	const agree = ref(false)
	const tips = ref('');
	const seconds = ref(120);
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		// console.log(text)
		tips.value = text;
	};
	const step = ref(1)
	const getCode = () => {
		if(!mobile.value) return uni.$u.toast('请输入手机号');
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码',
			});
			uni.$post({
				url:"/api/Sms/send",
				data:{
					mobile:mobile.value,
					event:'register',			// 注册传register 登录传login 忘记密码传pass 修改密码传 resetpwd 更换手机号传changemobile 微信登录绑定手机号传webind 验证是否是本机main 商家入驻 dplot 绑定银行卡 addpay
				}
			}).then(res=>{
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			})
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	
	
	// 实名表单
	const authobj = reactive({
		realname:'',
		zcardimg:'',
		bcardimg:'',
		yyzzimg:''
	})
	
	function subauth(){
		uni.$post({
			url:"/api/Realauth/Real_User",
			data:authobj
		}).then(res=>{
			uni.navigateTo({
				url:'./Result'
			})
		})
	}
	
	function sub(){
		if(step.value==1){
			if(!mobile.value) return uni.$u.toast('请输入手机号');
			if(!code.value) return uni.$u.toast('请输入验证码');
			if(!password.value) return uni.$u.toast('请输入密码');
			if(!repwd.value) return uni.$u.toast('请确认密码');
			if(password.value != repwd.value) return uni.$u.toast('两次密码不一致');
			if(!agree.value) return uni.$u.toast('请已阅读并同意用户协议和隐私政策');
			uni.$post({
				url:'/api/user/register',
				data:{
					mobile:mobile.value,
					code:code.value,
					password:password.value,
					scene:scene.value,
					group:2
				}
			}).then(res=>{
				const user = res.data.userinfo;
				uni.setStorageSync('user', user)
				step.value++
			})
		}else{
			let arr = Object.values(authobj).map(i=>i=String(i));
			if(arr.includes('')) return uni.$u.toast('请完善认证信息');
			subauth()
		}
	}
	
	
	
	
	
	
	
	const fileList1 = ref([]);
	watch(fileList1, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		authobj.yyzzimg = arr.join(',')
	}, {
		deep: true
	})
	const fileList2 = ref([]);
	watch(fileList2, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		authobj.zcardimg = arr.join(',')
	}, {
		deep: true
	})
	const fileList3 = ref([]);
	watch(fileList3, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		authobj.bcardimg = arr.join(',')
	}, {
		deep: true
	})
	
	// 删除图片
	const deletePic = (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		arr.value.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = arr.value.length;
		lists.map((item) => {
			arr.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = arr.value[fileListLen];
			arr.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
	
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: baseUrl + '/api/Common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					token: uni.getStorageSync('user').token
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl)
					}, 1000);
				},
			});
		});
	};
	
</script>

<style>
	page{
		background: #ffffff;
	}
	.ibox {
		width: 686rpx;
		height: 88rpx;
		/* background: #f8f8f8; */
		/* border-radius: 44rpx 44rpx 44rpx 44rpx; */
		padding: 25rpx 0rpx;
		border-bottom: 2rpx solid #F1F1F1;
		margin-top: 38rpx;
	}

	.kuang {
		width: 25rpx;
		height: 25rpx;
		border: 2rpx solid #013591;
	}
	
	.w-132{
		width: 132rpx;
	}
	
	
	.pbox{
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 44px);
		/* #endif */
	}
	
	.codebtn{
		min-width: 146rpx;
		padding: 0 24rpx;
		height: 44rpx;
		background: #a9d8bd;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	}
	
	
	.qybox{
		width: 690rpx;
		height: 92rpx;
		background: #F6F6F6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
</style>